On an API call from online stores to our Rails app, I need to send strings of HTML, CSS and JS to build a modal on their frontend. If the HTML and CSS are not an issue, the JS looks problematic as I am willing to use new Function ("js script in string") to add JS to my modal.

I read everywhere that new Function(), like eval(), is not secure at all but I cannot see any other way to do it.

To give more context, I am subject to two constraints

• I have hundreds of templates saved in my DB (template_id, html, css, js) that can be called by each store
• I need to access functions/modules that have been declared before like in the example below

import moduleX from 'moduleX'

const functionX = () => { something() }

const runJS = (js_string) => {
  const specificJS = new Function('moduleX', 'functionX', js_string)
  specificJS(moduleX, functionX)
}

const buildPopup = (popup_data) => {
  insertHtml(popup_data.html)
  insertCss(popup_data.css)
  runJS(popup_data.js)
}

Is there a more secure way to do it?